<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加影院</title>

    <!-- Bootstrap -->
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css"  >
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="css/bootstrap-theme.min.css"  >

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap-table.js"></script>
    <script src="js/locale/bootstrap-table-zh-CN.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Latest compiled and minified Locales -->
    <script src="js/bootstrap-table-export.js"></script>
    <script src="./js/common.js"></script>

</head>

<hr>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-4 column">
            <!-- 影院信息表格-->
            <table id="cinematable" class="table table-hover">

            </table>
        </div>

        <!-- 添加影院信息表单-->
        <div class="col-md-8 column">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <input type="hidden" class="form-control" id="cinemaId" />
                    <label for="inputcinemaname" class="col-sm-2 control-label">影院名称</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="cinemaName" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputcinemaaddr" class="col-sm-2 control-label">影院地址</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="cinemaAddr" />
                    </div>
                </div>
                <!--<div class="form-group">-->
                    <!--<div class="col-sm-offset-2 col-sm-10">-->
                        <!--<div class="checkbox">-->
                            <!--<label><input type="checkbox" />Remember me</label>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default" onclick="savecinemainfo()">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


<script>
    $(function(){
        checkCookie();
        createtable();
    });

    /**
     * 影院信息表格
     */
    function createtable() {
        var alltables = [];
        $.ajax({
            url: SERVER_URL + "/manageback/cinema/list",    //请求的url地址
            dataType: "json",   //返回格式为json
            async: false,//请求是否异步，默认为异步，这也是ajax重要特性
            type: "post",   //请求方式
            success: function (result) {
                alltables = result.data.list;
            },
            complete: function () {

            },
            error: function () {
            }
        });

        $('#cinematable').bootstrapTable('destroy').bootstrapTable({
            //toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            locale:'zh-CN',
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: false,
            searchOnEnterKey: true,
            showRefresh: false,                  //是否显示刷新按钮
            minimumCountColumns: 1,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            columns: [{
                field: 'cinemaName',
                title: "影院名称"
            }],
            data: alltables
        });
        //点击数据连接表格中的行触发点击事件：显示连接信息
        $('#cinematable').on('click-row.bs.table', function (e, row, element)
        {
            console.log(row);
            document.getElementById('cinemaId').value = row.cinemaId;
            document.getElementById('cinemaName').value = row.cinemaName;
            document.getElementById('cinemaAddr').value = row.cinemaAddr;

        });

    }
    
    
    function savecinemainfo() {
        var url;
        var cinemaId = $("#cinemaId").val();
        var cinemaName = $("#cinemaName").val();
        var cinemaAddr = $("#cinemaAddr").val();
        var data={
            "cinemaId":cinemaId,
            "cinemaName":cinemaName,"cinemaAddr":cinemaAddr
        };
        if(cinemaId==''){
            url = SERVER_URL + "/manageback/cinema/add";
        }else{
            url = SERVER_URL + "/manageback/cinema/update"
        }

        $.ajax({
            url: url,    //请求的url地址
            dataType: "json",   //返回格式为json
            async: false,//请求是否异步，默认为异步，这也是ajax重要特性
            data:data,
            type: "post",   //请求方式
            success: function (result) {
                //console.log(result);
                alert("添加成功");
            },
            complete: function () {

            },
            error: function () {
                alert("添加失败");
            }
        });
        
    }
</script>


</body>
</html>